<template>
	<view class="kqset">
		<ul>
		<li>
			<text>新消息通知</text>
			<text>已开启</text>
		</li>	
		<text>在手机系统“设置”-“通知”中找到应用进行修改。</text>
		</ul>
		<ul>
			<li>
				<text>声音提示</text>
				<u-switch v-model="value" @change="change"></u-switch>
			</li>
			<li>
				<text>震动提示</text>
				<u-switch v-model="value1" @change="change"></u-switch>
			</li>
		</ul>
		<ul>
			<text>设置提醒消息类型</text>
			<li>
				<text>系统公告</text>
				<u-switch v-model="value2" @change="change"></u-switch>
			</li>
			<li>
				<text>工作动态</text>
				<u-switch v-model="value3" @change="change"></u-switch>
			</li>
			<li>
				<text>提醒消息</text>
				<u-switch v-model="value4" @change="change"></u-switch>
			</li>
			<li>
				<text>到期任务</text>
				<u-switch v-model="value5" @change="change"></u-switch>
			</li>
			<li>
				<text>待办事项</text>
				<u-switch v-model="value6" @change="change"></u-switch>
			</li>
			</ul>
			
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value:true,
				value1:true,
				value2:true,
				value3:true,
				value4:true,
				value5:true,
				value6:true
			}
		},
		methods: {
			change(e) {
				console.log('change', e);
			},
		}
	}
</script>

<style>
	.kqset>ul>text{
		font-size: 14px;
		color: #999999;
		height: 30px;
		background-color:rgba(242, 242, 242, 0.5);
		margin-left: 20px;
		margin-top: 25px;
	}
	.kqset>ul>li>text:nth-child(1){
		margin-left: 15px;
	}
	.kqset>ul>li>text:nth-child(2){
		margin-right: 15px;
		color: #cccccc;
		font-size: 14px;
	}
	.kqset>ul>li>text{
		font-size: 14px;
		color: #666666;
	}
	.kqset>ul{
		margin-top: 40px;
	}
	.kqset>ul>li{
		width: 100vw;
		height: 50px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: white;
		margin-top: 3px;
	}
	*{
		padding: 0;
		margin: 0;
		list-style-type: none;
	}
.kqset{
	background-color:rgba(242, 242, 242, 0.5);
}
</style>
